<template>
  <div class="box">
    <div class="content">
      <div class="title">出库信息确认</div>
      <div style="margin-top: 20px">
        <el-descriptions title="" border size="medium">
          <el-descriptions-item
            v-for="(item, index) in data"
            :key="index"
            :label="item.label"
            >{{ item.value }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          height="100%"
          style="width: 100%"
          border
          :header-cell-style="{
            'text-align': 'center',
            color: '#009191',
            'font-size': '18px',
          }"
        >
          <el-table-column type="index" label="序号" width="60" align="center">
          </el-table-column>
          <el-table-column prop="materialName" label="物品类型" align="center">
          </el-table-column>
          <el-table-column prop="specs" label="规格型号" align="center">
          </el-table-column>
          <el-table-column prop="number" label="数量" align="center" width="80">
          </el-table-column>
          <el-table-column prop="goodsCode" label="仪器编号" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom">
        <div class="sure">
          <el-button
            type="primary"
            icon="el-icon-check"
            class="bth2"
            @click="outbound"
            >创建借用凭证</el-button
          >
        </div>
        <div style="margin-left: auto">
          <!-- <el-button plain class="btnP" @click="backInfo"
            >返回修改信息</el-button
          > -->
          <el-button plain class="btnP" @click="backGoods"
            >返回增减物品</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BorrowOutbound",
  props: {},
  components: {},
  data() {
    return {
      data: [
        { label: "借用班组", value: "", key: "teamGroupName" },
        { label: "借用人姓名", value: "", key: "username" },
        { label: "工程类型", value: "", key: "projectType" },
        { label: "工程编号", value: "", key: "projectCode" },
        { label: "工程名称", value: "", key: "projectName" },
      ],
      tableData: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    transData() {
      this.tableData.forEach((i) => {
        if (i.goodsList && i.goodsList.length) {
          i.goodsCode = i.goodsList.map((i) => i.goodsCode).join(",");
        } else {
          i.goodsCode = "";
        }
      });
    },
    backInfo() {
      this.$emit("goStep", 0);
    },
    backGoods() {
      this.$emit("goStep", 2);
    },
    outbound() {
      this.$emit("goStep", 4);
    },
  },
};
</script>


<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  .content {
    width: 80%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
      /* 水平偏移 | 垂直偏移 | 模糊半径 | 阴影颜色与透明度 */ 0 6px 20px
        rgba(0, 0, 0, 0.19); /* 可以添加多个阴影效果 */
    border-radius: 14px;
    padding: 20px;
    .title {
      color: #009191;
      font-weight: bold;
      font-size: 20px;
    }
    .table {
      margin-top: 20px;
      height: 58%;
    }
    .bottom {
      margin-top: 20px;
      display: flex;
      align-items: center;
      position: relative;
      .sure {
        position: absolute;
        left: calc(50% - 40px);
      }
    }
  }
}

:deep .is-bordered-label {
  width: 120px;
  color: #009191;
  font-weight: 500 !important;
  font-size: 18px;
}
:deep .el-descriptions-item__content {
  color: #000000;
  font-size: 18px;
}

.bth2 {
  color: white;
  background-color: #009191;
}
.btnP {
  color: #009191;
  border-color: #009191;
}
.btnP:hover {
  color: #009191; /* 悬停文字颜色 */
  border-color: #009191; /* 悬停边框颜色 */
  background-color: transparent; /* 保持背景透明 */
}
</style>
